<template>
    <div class="circular-progress-bar">
        <svg :width="size" :height="size" xmlns="" class="circular-progress-svg">
            <!-- 背景环 -->
            <circle :cx="size / 2" :cy="size / 2" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundColor"
                fill="none" />
            <!-- 填充环 -->
            <circle :cx="size / 2" :cy="size / 2" :r="radius" :stroke-width="strokeWidth" :stroke="color" fill="none"
                :stroke-dasharray="circumference" :stroke-dashoffset="dashoffset" />
        </svg>
        <div class="circular-text-box">
            <div class="text-num">{{ percentage }}</div>
            <div class="text-name" :style="{ width: size + 'px' }">{{ text }}</div>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        size: {
            type: Number,
            default: 200,
        },
        strokeWidth: {
            type: Number,
            default: 10,
        },
        percentage: {
            type: Number,
            default: 50,
        },
        color: {
            type: String,
            default: "#3498db",
        },
        backgroundColor: {
            type: String,
            default: "#5B5F73",
        },
        text: {
            type: String,
            default: '在线电台',
        },
    },

    computed: {
        radius() {
            return (this.size - this.strokeWidth) / 2;
        },
        circumference() {
            return 2 * Math.PI * this.radius;
        },
        dashoffset() {
            const progress = this.percentage / 100;
            return this.circumference * (1 - progress);
        },
    },
};
</script>
  
<style lang="scss" scoped>
.circular-progress-bar {
    position: relative;
    display: inline-block;

    .circular-progress-svg {
        transform: rotate(180deg);
    }

    .circular-text-box {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #D8D8D8;

        .text-num {
            font-weight: 700;
            font-size: 18px;
        }

        .text-name {
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
            font-size: 12px;
        }
    }
}</style>
  